<template>
  <div class="earth-container">
    <!-- 浮动文本 -->
    <div class="belt-speed-label">
      皮带速度：{{ beltSpeed }} m/s
    </div>
    <!-- <img src="@/assets/Belt/Belt2_2_N.svg" alt="Earth" ref="svgRef" class="earth-svg" /> -->
    <!-- SVG 图标 -->
    <Belt2_2_N ref="svgRef" class="earth-svg" />
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted, watch, shallowRef, nextTick, computed } from "vue";
// import EarthIcon from "../../../assets/5_2_1kuang.svg";
import Belt2_2_N from '@/assets/Belt/Belt2_2_N.svg';
import { applyAnimations, clearAllAnimations ,applyColorChange,clearRedLock,clearNormalLock} from '../../../animationManager';
import { act } from "../../../../utils/websocket";
// svg 元素引用
const svgRef = ref<InstanceType<typeof Belt2_2_N>>();

// 接收属性
const props = defineProps({
  runEarth: { type: Boolean, default: false },
  speed: { type: Number, default: 0 },
  status: { type: Number, default: 0 },
});
let beltSpeed = computed(() => props.speed);
let Beltrun = computed(() => props.runEarth);
let Beltstatus = computed(() => props.status);


// 初始化
onMounted(() => {
  const svg = svgRef.value!.$el as SVGSVGElement;
  if (!svg) return;

  if (Beltstatus.value==0) {
    // 先开红色动画（优先级高）
    applyAnimations(svg, true, { colorTarget: 'red' });
  } else if (Beltrun.value) {
    // 普通动画
    applyAnimations(svg, true);
  }
});

// 监听普通动画状态变化
watch(() => Beltrun.value, (newVal) => {
  const svg = svgRef.value!.$el as SVGSVGElement;
  if (!svg) return;

  if (newVal) {
    applyAnimations(svg, true);       // 开普通动画（不会覆盖红色动画）
  } else {
    clearNormalLock(svg);              // 只清除普通动画锁，不影响红色动画
  }
});

// 监听红色动画状态变化（优先级高）
watch(() => Beltstatus.value, (newVal) => {
  const svg = svgRef.value!.$el as SVGSVGElement;
  if (!svg) return;

  if (newVal==0) {
    applyAnimations(svg, true, { colorTarget: 'red' }); // 开红色动画
  } else {
    clearRedLock(svg);               // 只清除红色动画锁，不影响普通动画
  }
});
</script>

<style scoped>
.earth-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative; /* 新增定位上下文 */
}

.earth-svg {
  transform-origin: center;
  display: block;
}
/* 浮动文字样式 */
.belt-speed-label {
  position: absolute;
  top: 12px;       /* 可调整 */
  left: 130px;      /* 可调整 */
  color: rgb(0, 255, 255);
  font-size: 17px;
  transform: rotate(-20deg); /* ← 添加旋转 */
  pointer-events: none; /* 不影响 SVG 交互 */
  z-index: 10;
}
</style>
